<template>
  <view class="container">
    <view class="navbar u-f-ajc">
      <image src="/static/jibei/home/back.png" class="abso_back" mode="widthFix"
        @click="$u.route({type: 'back', delta: 1})"></image>
      <image src="/static/jibei/goods/detail_header.png" mode="widthFix"></image>
    </view>



    <view class="contents">
      <view class="scroll_box">
        <view class="swiper_box">
          <view class="part" v-if="thumb == ''">
            <swiper class="banner-box" indicator-dots autoplay indicator-active-color="#ff5555" circular
              :interval="5000" :duration="300" indicator-color="rgba(0,0,0,.3)">
              <swiper-item v-for="(item, index) in bannerList" :key="index">
                <image class="banner-image" :src="item" mode="aspectFill" lazy-load></image>
              </swiper-item>
            </swiper>
          </view>
          <view v-if="thumb != ''" class="thumb">
            <image :src="thumb"></image>
          </view>
        </view>

        <view class="goods_content">
          <view class="titles u-f-ac u-f-jsb">
            <view>
              <view class="goods_title text-overflow">{{data.title}}</view>
              <view class="u-f prices">
                <text>￥</text>
                <view class="new_price">{{data.marketprice}}</view>
              </view>
            </view>
            <!-- <view class="goods_title_right u-f-ajc u-f-column">
              <u-icon name="share" color="#115763" size="50"></u-icon>
              <text style="font-size: 26rpx;">分享</text>
            </view> -->
            <view>
              <view v-if="data.ck_price">创客价：{{data.ck_price}}</view>
              <view v-if="data.ck_price">区代价：{{data.qd_price}}</view>
              <view v-if="data.ck_price">市代价：{{data.sd_price}}</view>
            </view>
          </view>
          <view class="totals u-f-ac u-f-jsb">
            <!-- <view>快递：0包邮</view> -->
            <view class="flex">
              快递：{{data.dispatchprice}}
              <view class="kd" v-if="isNaN(data.dispatchprice)">
                <view v-if="data.type == 1&&data.isverify !=2">{{min}}~{{max}}</view>
              </view>
              <view class="kd" v-else-if="data.type == 1&&data.isverify !=2">
                <view class="" v-if="data.dispatchprice == 0">
                  包邮
                </view>
                <view v-else>{{dispatchprice}}</view>
              </view>
            </view>
            <view>销量：{{data.sales}}</view>
          </view>
          <view class="xiaofeizhi u-f u-f-column">
            <view>消费值：{{data.jfz}}</view>
            <view>贝值：{{data.fenhongzhi}} + 股值：{{data.tihuoquan}}</view>
          </view>
        </view>

      </view>

      <view class="tab" v-if="params? true:false">
        <uni-segmented-control :current="current" :values="tabs" @clickItem="onClickItem" style-type="text"
          active-color="#175e3c"></uni-segmented-control>
        <view class="content">
          <view v-show="current === 0">
            <rich-text :nodes="content"></rich-text>
          </view>
          <view v-show="current === 1">
            <scroll-view scroll-y="true" style="height: 500upx;">
              <view class="params webkit" v-for="(item,index) in data.params" :key="index">
                <view class="t">{{item.title}}</view>
                <view class="v flex">{{item.value}}</view>
              </view>
            </scroll-view>

          </view>
        </view>
      </view>
      <view class="goods-detail" v-else>
        <rich-text :nodes="content"></rich-text>
      </view>


    </view>

    <view class="foot webkit u-f-ac">
      <view class="item u-f-ajc u-f-column" @tap="fav">
        <image :src="love"></image>
        <text class="text">关注</text>
      </view>
      <view class="item u-f-ajc u-f-column" @click="cart">
        <image src="../../static/cart.png"></image>
        <text class="text">购物车</text>
        <uni-badge v-if="data.cartCount > 0 " :text="data.cartCount" type="danger"></uni-badge>
      </view>
      <view class="btn flex u-f-ajc" @click="buygoods" data-type="0">加入购物车</view>
      <view class="btn flex buy u-f-ajc" @click="buygoods" data-type="1">立即购买</view>
    </view>


    <view class="modal" :class="{in:picker}">
      <view class="city-picker">
        <view class="t">{{cityText}}</view>
        <view class="g">
          <view class="cell">
            <view v-for="(item,index) in data.citys" :key="index">{{item}}</view>
          </view>
        </view>
        <button type="primary" @tap="cityPicker">确定</button>
      </view>
    </view>
    <view class="mask" :class="{visible:picker}" v-bind:style="{ display: display}" @tap="cityPicker"></view>

    <view class="mask" v-if="mask" :class="{active:buy}" @click="closeModal"></view>
    <view class="modal" :class="{in:buy}">
      <view class="option">
        <view class="inner">
          <view class="goodsinfo">
            <image src="../../static/close.png" mode=""
              style="width: 40upx;height: 40upx;position: absolute;right: 24upx;top: 20pux;" @click="closeModal">
            </image>
            <image class="image" :src="data.thumb" mode=""></image>
            <view class="topinfo" style="color: #f55;">￥{{skuPrice || data.marketprice}}</view>
            <view class="topinfo" style=""></view>
            <view class="topinfo" style="">
              <view v-if="options.options">{{optionsText}}</view>
            </view>
          </view>
          <view>
            <view v-for="(item,index) in optionlist" :key='index' class="optionlist">
              <view style="line-height: 80upx;">{{item.title}}</view>
              <view class="filter-body-section-body style-flex style-flex-wrap">
                <axb-check-box ref="radio3" :list="item.list" @change="radioChangeType($event,item.id)"></axb-check-box>
              </view>
            </view>
            <view class="webkit optionlist" style="padding-top: 20upx;">
              <view>数量：</view>
              <view class="flex"></view>
              <view>
                <!-- <uni-number-box :min="item.minbuy" :max="item.maxbuy" :value="item.total" v-on:change="update($event,item.id)"></uni-number-box> -->
                <uni-number-box :min="minbuy" :max="maxbuy" :value="numvalue" v-on:change="update"></uni-number-box>
              </view>
            </view>
            <view style="height: 100upx;"></view>
          </view>
          <view>
            <button type="primary" style="border-radius: 0;background: #05052B;" @click="submit">确定</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import uniSegmentedControl from '../../components/uni-segmented-control.vue';
  import uniBadge from '../../components/uni-badge.vue';
  import uniNumberBox from '../../components/uni-number-box.vue';
  import axbCheckBox from '../../components/axb-checkbox/axb-checkbox.vue';
  export default {
    data() {
      return {
        tabs: [
          '详情',
          '参数'
        ],
        options: [],
        optionsText: '请选择规格',
        data: [],
        bannerList: [],
        coin: [],
        params: false,
        picker: false,
        dispatchprice: "",
        thumb: "",
        max: "",
        min: "",
        love: "../../static/love.png",
        content: "",
        current: 0,
        display: 'none',
        cityText: "只配送区域",
        favorite: 0,
        color: "#999",
        goodsid: 'asd',
        buy: false,
        mask: false,
        subBtn: 0,
        total: 1,
        minbuy: 1,
        maxbuy: 999,
        numvalue: 1,
        classes: [],
        optionlist: [],
        openid: '',
        oid: '',

        options2: [],
        skuPrice: '',
      };
    },
    onLoad: function(e) {
      this.goodsid = e.goodsid
      uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.oid = "&openid=" + res.data
          this.openid = res.data
          this.setAjax()
        },
        fail: () => {
          this.setAjax()
        }
      });
    },
    components: {
      uniSegmentedControl,
      uniBadge,
      uniNumberBox,
      axbCheckBox
    },
    methods: {
      setAjax() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id=' +
            this.goodsid + '&app=1' + this.oid,
          success: res => {
            console.log(res)
            uni.hideLoading()
            this.data = res.data;
            this.coin = res.data.coin;
            if (res.data.thumbs.length < 1) {
              this.thumb = res.data.thumb;
            } else {
              this.bannerList = res.data.thumbs;
            }
            if (res.data.params) {
              this.params = true;
            }
            if (isNaN(res.data.dispatchprice)) {
              this.max = res.data.dispatchprice.max.toFixed(2);
              this.min = res.data.dispatchprice.min.toFixed(2);
            } else {
              var dis = res.data.dispatchprice
              this.dispatchprice = parseFloat(dis).toFixed(2)
            }
            if (res.data.onlysent == 0) {
              this.cityText = "不配送区域"
            }
            this.favorite = res.data.isFavorite
            if (this.favorite == 1) {
              this.love = '../../static/love_fill.png'
              this.color = '#f55'
            }
            var content = res.data.content;
            content = content.replace(/data-lazy/g, "src");
            content = content.replace(/style="/g, 'style="width:100%;')
            this.content = content;
          },
          fail: () => {},
          complete: () => {}
        });
        if (this.oid != "") {
          uni.request({
            url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.picker&app=1&id=' +
              this.goodsid,
            method: 'POST',
            data: {
              'openid': this.openid
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: res => {
              uni.hideLoading()
              if (res.data.result.goods.maxbuy == 0) {
                this.maxbuy = Number(res.data.result.goods.total)
              } else {
                this.maxbuy = Number(res.data.result.goods.maxbuy)
              }
              if (res.data.result.goods.minbuy != 0) {
                var minbuy = Number(res.data.result.goods.minbuy)
                this.minbuy = minbuy
                this.numvalue = minbuy
                this.total = minbuy
              }
              this.options = res.data.result
              this.options2 = res.data.result.options
              console.log(this.options)
              var arry = []
              for (var i in this.options.specs) {
                var a = []
                var v = {
                  id: '',
                  list: [],
                  title: ''
                }
                for (var j in this.options.specs[i].items) {
                  var ary = {
                    name: '',
                    value: '',
                    checked: 0
                  }
                  ary['name'] = this.options.specs[i].items[j].title
                  ary['value'] = this.options.specs[i].items[j].id
                  a.push(ary)
                }
                v['list'] = a
                v['id'] = this.options.specs[i].id
                v['title'] = this.options.specs[i].title
                arry.push(v)
              }
              this.optionlist = arry
              console.log('11111111111111111111', this.optionlist)
            },
            fail: () => {},
            complete: () => {}
          });
        }
      },
      cart() {
        if (this.oid == '') {
          uni.showModal({
            content: "请先登录",
            confirmText: "确定",
            cancelText: "取消",
            success: res => {
              if (res.confirm) {
                uni.navigateTo({
                  url: '../login/login'
                });
              }
            },
          })
        } else {
          uni.reLaunch({
            url: '../cart/cart'
          });
        }
      },
      update(e) {
        this.total = e
      },
      radioChangeType(val, id) { //选择规格
        if (val == null) {
          val = ''
        }
        this.classes[id] = val
        console.log(this.classes)
        let specs = ''
        for (var i in this.classes) {
          specs = specs + '_' + this.classes[i]
        }
        console.log(specs)
        let finds = this.options2.find(item => item.specs == specs.substr(1))
        if (finds) this.skuPrice = finds.marketprice
        console.log(this.skuPrice)
      },
      buygoods(e) { //点击购买或者购物车按钮
        if (this.oid == '') {
          uni.showModal({
            content: "请先登录",
            confirmText: "确定",
            cancelText: "取消",
            success: res => {
              if (res.confirm) {
                uni.navigateTo({
                  url: '../login/login'
                });
              }
            },
          })
        } else {
          this.mask = true
          setTimeout(() => {
            this.buy = true
          }, 100)
          if (e.currentTarget.dataset.type == 1) {
            this.subBtn = 1
          } else {
            this.subBtn = 2
          }
        }
      },
      onClickItem(index) {
        if (this.current !== index) {
          this.current = index;
        }
      },
      cityPicker() {
        this.picker = false;
        this.display = 'none';
      },
      showPicker() {
        this.display = 'block';
        this.picker = true
      },
      fav() { //点击关注
        if (this.oid == '') {
          uni.showModal({
            content: "请先登录",
            confirmText: "确定",
            cancelText: "取消",
            success: res => {
              if (res.confirm) {
                uni.navigateTo({
                  url: '../login/login'
                });
              }
            },
          })
        } else {
          if (this.favorite == 1) {
            this.favorite = 0
            this.love = '../../static/love.png'
            this.color = '#999'
          } else {
            this.favorite = 1
            this.love = '../../static/love_fill.png'
            this.color = '#f55'
          }
          uni.request({
            url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.favorite.toggle&app=1&id=' +
              this.goodsid + '&isfavorite=' + this.favorite,
            method: 'POST',
            data: {
              'openid': this.openid
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: res => {
              if (res.data.result.isfavorite == true) {
                uni.showToast({
                  title: "关注成功"
                })
              }
            },
            fail: () => {},
            complete: () => {}
          });
        }
      },
      closeModal() { //关闭modal
        this.buy = false
        setTimeout(() => {
          this.mask = false
        }, 300)

      },
      submit() { //提交
        var specs = '',
          optionid = 0
        for (var i in this.classes) {
          specs = specs + '_' + this.classes[i]
        }
        for (var j in this.options.options) {
          if ('_' + this.options.options[j].specs == specs) {
            optionid = this.options.options[j].id
          }
        }
        if (optionid == 0 && this.options.options) {
          uni.showToast({
            title: '请选择规格',
            icon: "none"
          });
        } else if (this.subBtn == 1) {
          //购买
          uni.navigateTo({
            url: '../order/create/create?id=' + this.goodsid + '&optionid=' + optionid + '&total=' + this.total
          });
        } else if (this.subBtn == 2) {
          // 加入购物侧
          uni.request({
            url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.cart.add&app=1',
            method: 'POST',
            data: {
              openid: this.openid,
              id: this.goodsid,
              optionid: optionid,
              total: this.total,
              diyformdata: false
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: res => {
              this.closeModal()
              setTimeout(() => {
                uni.showToast({
                  title: '加入购物车成功',
                  icon: "none"
                });
                this.setAjax()
              }, 300)
            },
            fail: () => {},
            complete: () => {}
          });
        }
      }
    }
  }
</script>

<style>
  .spec {
    color: #000;
    line-height: 50upx;
    background: #f7f7f7;
    display: inline-block;
    font-size: 24upx;
    margin: 16upx 20upx 0 0;
    padding: 0 24upx;
    border-radius: 5px;
  }

  .optionlist {
    padding: 20upx;
    padding-top: 8upx;
    border-top: 1px solid #eee;
  }

  .option {
    height: auto;
    width: 100%;
    padding-bottom: 80upx;
    z-index: 1001;
  }

  .topinfo {
    font-size: 28upx;
    height: 36upx;
    line-height: 36upx;
  }

  .inner {
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  }

  .goodsinfo {
    padding: 20upx;
    padding-left: 220upx;
    position: relative;
  }

  .goodsinfo .image {
    height: 168upx;
    width: 168upx;
    background: #fff;
    padding: 4upx;
    border: 2upx solid #eee;
    border-radius: 4upx;
    position: absolute;
    top: -56upx;
    left: 20upx;
    box-shadow: 0 0 8upx rgba(0, 0, 0, 0.1);
  }

  .uni-badge {
    position: absolute;
    top: 3px;
    right: 4px;
    color: #fff;
    background: #f00;
  }


  .tab {
    background: #fff;
    border-top: 2upx solid #eaeaea;
    border-bottom: 2upx solid #eaeaea;
    height: 80upx;
    text-align: center
  }

  .tab .flex {
    line-height: 80upx;
    color: #666;
    border-bottom: 4upx solid transparent;
    margin-bottom: -2upx;
  }

  .tab .flex.active {
    color: #175e3c;
    border-color: #175e3c;
  }

  .info {
    padding: 16upx 20upx;
    background: #fff;
  }

  .info .top .flex {
    height: 80upx;
    line-height: 40upx;
  }

  .info .top .right {
    width: 70upx;
    text-align: center;
    margin-left: 10upx;
  }

  .info .top .right image {
    display: block;
    width: 34upx;
    height: 34upx;
    margin: 0 auto;
  }

  .info .top .right text {
    color: #f55;
    display: block;
    width: 70upx;
    text-align: center;
    font-size: 24upx;
  }

  .info .center .subtitle {
    font-size: 26upx;
    color: #999;
    line-height: 50upx;
    margin-bottom: 10upx;
  }

  .info .center .price {
    color: #f00;
    display: inline-block;
    font-size: 40upx;
    line-height: 50upx;
  }

  .info .center .price .original {
    display: inline-block;
    font-size: 24upx;
    color: #c0c0c0;
    margin-left: 20upx;
    text-decoration: line-through;
  }

  .info .center .bl {
    color: #f00;
    line-height: 56upx;
  }

  .info .bottom view {
    color: #666;
    font-size: 26upx;
  }

  .kd {
    display: inline-block;
  }

  .jifen {
    margin-top: 20upx;
    background: #fff;
    padding: 20upx;
    margin-bottom: 20upx;
  }

  .jifen .title {
    font-size: 32upx;
    color: #000;
    text-align: center;
  }

  .jifen .subtitle {
    color: #9a9a9a;
    font-size: 24upx;
    line-height: 30upx;
    padding-top: 8upx;
    text-align: center;
  }

  .jifen .list .term {
    float: left;
    margin-right: 20upx;
    width: 342upx;
    text-align: center;
    border: 2upx solid #ffe8c8;
    border-radius: 5px;
    padding: 30upx 0;
    margin-right: 2%;
    margin-top: 20upx;
    list-style: none;
    color: #9f7a48;
  }

  .jifen .list .term:nth-child(2n) {
    margin-right: 0;
  }

  .jifen .list .term .symbol {
    display: inline-block;
    font-size: 24upx;
    color: #9f7a48;
  }

  .jifen .list .term .num {
    display: inline-block;
    font-size: 32upx;
    color: #9f7a48;
  }

  .jifen .list .term .coinname {
    display: inline-block;
    font-size: 24upx;
    color: #fe9402;
    margin-left: 10upx;
  }

  .segmented-control.text {
    margin: 0;
    width: 100%;
    background: #fff;
  }

  .city {
    font-size: 30upx;
    padding: 22upx 30upx;
    line-height: 48upx;
    width: 750upx;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    margin-top: 20upx;
    position: relative;
  }

  .city:after {
    font-family: uniicons;
    content: '\E583';
    position: absolute;
    right: 12px;
    top: 50%;
    color: #bbb;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .city .text {
    width: 670upx;
  }

  .city .text view {
    display: inline;
    margin-left: 12upx;
  }

  .params {
    padding: 30upx 24upx 26upx;
    background: #fff;
    position: relative;
  }

  .params:before {
    content: " ";
    position: absolute;
    left: 20upx;
    right: 20upx;
    bottom: -2upx;
    height: 2upx;
    border-top: 2upx solid #ebebeb;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .tab .params view {
    line-height: 28upx;
    font-size: 26upx;
    border: 0;
    margin: 0;
    text-align: left;
  }

  .params .t {
    width: 160upx;
    color: #999;
  }

  .params .v {
    padding-left: 10upx;
    color: #666;
  }

  .tab .content {
    border-top: 1px solid #eaeaea;
  }


  .mask {
    position: fixed;
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    width: 100%;
    height: 100%;
    left: 0;
    opacity: 0;
    top: 0;
    z-index: 1000;
    -moz-transition-duration: 400ms;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
  }

  .mask.visible {
    opacity: 1;
  }

  .modal {
    position: fixed;
    width: 100%;
    z-index: 1001;
    left: 0;
    bottom: -80upx;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
  }

  .modal.in {
    -moz-transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .city-picker .t {
    color: #333;
    font-size: 0.75rem;
    padding: 0.5rem 0.7rem;
    text-align: center;
    background: white;
  }

  .city-picker .g {
    background-color: #fff;
    line-height: 1.4;
    font-size: 0.8rem;
    overflow: hidden;
    position: relative;
    overflow-y: auto;
    max-height: 485px;
    padding: 12px;
  }

  .city-picker .g .cell view {
    font-style: normal;
    display: inline-block;
    border: 1px solid #ebebeb;
    height: 1.2rem;
    line-height: 1.2rem;
    padding: 0 0.5rem;
    margin: 0 0.1rem 0.2rem 0;
    font-size: 0.6rem;
    border-radius: 0.15rem;
  }

  .city-picker button {
    background: #f55;
    border-radius: 0;
    font-size: 15px;
    height: 45px;
    line-height: 45px;
  }

  .city-picker button:after {
    border: 0;
  }

  .mask {
    position: fixed;
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    width: 100%;
    height: 100%;
    left: 0;
    opacity: 0;
    top: 0;
    z-index: 1000;
    -moz-transition-duration: 400ms;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
  }

  .mask.active {
    opacity: 1;
  }
</style>

<style lang="scss">
  page {
    background-color: #B5C3C7;
  }

  .container {
    width: 100%;
    height: 100vh;
    background: url(/static/jibei/home/home_bg.png) no-repeat 0 0;
    background-size: cover;
    box-sizing: border-box;
  }

  .navbar {
    width: 100%;
    padding: 120rpx 0 0;

    image {
      width: 80%;
    }
  }

  .contents {
    margin-top: 30rpx;
    padding: 0 0 150rpx;
  }

  .scroll_box {
    width: 100%;
    height: 1100rpx;
    background: url(../../static/jibei/goods/kuang2.png) no-repeat 0 0;
    background-size: cover;
    box-sizing: border-box;
    padding: 40rpx 54rpx;
    color: #115763;
  }

  .swiper_box {
    width: 100%;
    height: 640rpx;
    border-radius: 20rpx;
    overflow: hidden;

    // background-color: skyblue;
    // opacity: 0.4;
    .part {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
    }

    .banner-box {
      width: 100%;
      height: 100%;
      height: 750upx;
    }

    .banner-image {
      width: 100%;
      height: 100%;
    }

    .thumb.part {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
    }

    .banner-box {
      width: 100%;
      height: 100%;
    }

    .thumb {
      width: 100%;
      height: 100%;
    }

    .thumb image {
      width: 100%;
      height: 100%;
    }
  }

  .goods_content {
    padding: 20rpx 0 0;

    .titles {
      padding: 0 20rpx;

      .goods_title {
        width: 350rpx;
        font-size: 32rpx;
        // background-color: skyblue;
      }
    }

    .prices {
      // padding: 0 20rpx;
      color: #CB310E;
      font-weight: 700;
      margin-top: 10rpx;

      .new_price {
        font-size: 46rpx;
        line-height: 1;
      }

      text {
        font-size: 20rpx;
        margin-top: 14rpx;
        margin-right: 10rpx;
      }
    }

    .totals {
      padding: 0 20rpx;
      font-size: 26rpx;
    }

    .xiaofeizhi {
      justify-content: center;
      width: 100%;
      height: 140rpx;
      background: url(/static/jibei/goods/kuang3.png) no-repeat 0 0;
      background-size: cover;
      padding: 20rpx 40rpx 0;

      view {
        font-size: 34rpx;
        color: #FFF0D0;
      }
    }
  }

  .foot {
    position: fixed;
    bottom: 0;
    height: 110upx;
    width: 750upx;
    background: #115763;
    border-top: 1px solid #eaeaea;
  }

  .foot .item {
    width: 130upx;
    position: relative;
  }

  .foot .item image {
    width: 50upx;
    height: 50upx;
    display: block;
  }

  .foot .item .text {
    display: block;
    text-align: center;
    font-size: 22upx;
    color: #FFFFFF;
  }

  .foot .btn {
    text-align: center;
    height: 100%;
    color: #fff;
    font-size: 34rpx;
    background: #DBA453;
  }

  .foot .btn.buy {
    background: #996923;
  }

  button {
    background-color: #115763 !important;
  }
</style>
